<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">Radio</view>
			<view class="tui-page__desc">单项选择器，支持放大缩小，支持自定义颜色。</view>
		</view>
		<view class="tui-page__bd">
			<view class="tui-title thorui-cells">默认样式</view>
			<tui-radio-group name="radio" v-model="val" @change="change">
				<view class="thorui-cells thorui-white__bg thorui-align__center">
					<tui-label>
						<view class="thorui-align__center">
							<tui-radio value="1"></tui-radio>
							<text class="tui-text">选中</text>
						</view>
					</tui-label>
					<tui-label margin="0 0 0 40rpx">
						<view class="thorui-align__center">
							<tui-radio value="2"></tui-radio>
							<text class="tui-text">未选中</text>
						</view>
					</tui-label>
				</view>
			</tui-radio-group>

			<view class="tui-title thorui-cells">推荐展示 | 改变颜色</view>
			<tui-radio-group>
				<tui-label v-for="(item,index) in radioItems" :key="index">
					<tui-list-cell>
						<view class="thorui-align__center">
							<tui-radio :checked="item.checked" :value="item.value" color="#07c160" borderColor="#999">
							</tui-radio>
							<text class="tui-text">{{item.name}}</text>
						</view>
					</tui-list-cell>
				</tui-label>
			</tui-radio-group>

			<view class="tui-title thorui-cells">推荐展示 | 改变大小</view>
			<tui-radio-group>
				<tui-label v-for="(item,index) in radioItems" :key="index">
					<tui-list-cell>
						<view class="thorui-flex__between">
							<text>{{item.name}}</text>
							<tui-radio :scaleRatio="1.2" color="#EB0909" :checked="item.checked" :value="item.value">
							</tui-radio>
						</view>
					</tui-list-cell>
				</tui-label>
			</tui-radio-group>

			<view class="tui-title thorui-cells">推荐展示</view>
			<tui-radio-group>
				<tui-label v-for="(item,index) in radioItems" :key="index">
					<tui-list-cell>
						<view class="thorui-flex__between">
							<text class="tui-text">{{item.name}}</text>
							<tui-radio isCheckMark checkMarkColor="#07c160" :scaleRatio="1.3" :checked="item.checked"
								:value="item.value">
							</tui-radio>
						</view>
					</tui-list-cell>
				</tui-label>
			</tui-radio-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				val: '1',
				radioItems: [{
						name: '中国',
						value: '1',
						checked: true
					},
					{
						name: '美国',
						value: '2',
						checked: false
					},
					{
						name: '俄罗斯',
						value: '3',
						checked: false
					}
				]
			}
		},
		methods: {
			change(e) {
				console.log('change:' + e.detail.value)
			}
		}
	}
</script>

<style>
	.tui-title {
		width: 100%;
		font-size: 28rpx;
		color: #888;
		padding: 40rpx 30rpx 20rpx;
		box-sizing: border-box;
	}

	.tui-text {
		font-size: 30rpx;
		padding-left: 12rpx;
	}
</style>
